<%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*,java.text.*,
com.brother.model.*,com.brother.service.*"   pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ include file="international.jsp" %> 
<%
String trackerId = request.getParameter("trackerId");
com.brother.model.Customer user = (com.brother.model.Customer)session.getAttribute(com.brother.Constants.LOGIN_SESSTION_NAME);
if(user == null)
	return;
session.setAttribute(Constants.TOP_WIDTH, "264px");
TrackerService tks = new TrackerService();
List<Tracker> trackers = tks.findUserTracker(user.getUserid());

String dateFormat = (String)session.getAttribute(Constants.DATE_FORMAT_SESSION_NAME);

String extDateFormat = (String)session.getAttribute(Constants.EXT_DATE_FORMAT_SESSION_NAME);




SimpleDateFormat format = new SimpleDateFormat(dateFormat);

Calendar calendar = Calendar.getInstance();
calendar.set(Calendar.DAY_OF_MONTH, calendar.get(Calendar.DAY_OF_MONTH) - 7);



%>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title><fmt:message key="history.title"/> - <fmt:message key="company.name"/></title>
<meta name="description" content="<fmt:message key="description.keyword"/>" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/grid-examples.css" />
<style type=text/css>
        /* style rows on mouseover */
        .x-grid3-row-over .x-grid3-cell-inner {
            font-weight: bold;
        }
        .x-grid3-scroller{
        	overflow:auto;
			position:relative;
			height:100%;
			
        }
        .x-grid3-cell-inner{
         	text-align:left;
        }
        .x-grid3-hd-inner{
        	text-align:left;
        }
        .x-grid3{
        	height:100%;
        }
        .x-grid3-viewport{
        	height:100%;
        }
    </style>
    
    
    <script type="text/javascript" src="js/ext-base.js"></script>
    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript" src="js/extgrid.js"></script>
    <script type="text/javascript" src="js/search.js"></script>
</head>
<body onLoad="initialize();" onUnload="GUnload()">

<script>
       function Point(iX, iY){ 
          this.x = iX; 
          this.y = iY; 
       } 
 function fGetXY(obj){ 
           var oTmp = obj;     
           if(!oTmp||(typeof(oTmp.offsetLeft) == "undefined") 
               ||(typeof(oTmp.offsetTop) == "undefined") 
               ||!oTmp.tagName){ 
                return null; 
           } 
           var pt = new Point(0,0);   
           do{ 
      pt.x += oTmp.offsetLeft; 
      pt.y += oTmp.offsetTop; 
      //alert(oTmp.parentNode.tagName);
      oTmp = oTmp.parentNode; 
  } while(oTmp.tagName!="BODY"); 
  return pt; 
       } 
       
	   var gMsgTop = 0; //fGetXY(document.getElementById("tmp_pos")).y;
function show_tip(msg)
{

	if (gMsgTop == 0)
	{
		//gMsgTop = fGetXY(document.getElementById("tmp_pos")).y + 5;
		//gMsgTop = fGetXY(document.getElementById("tipTop")).y + 50;
		
		//document.getElementById("msg").style.top = gMsgTop;
		//document.getElementById("msg").style.display = "inline";
		// alert(document.getElementById("msg").style.offsetTop);
	}
	
	document.getElementById("msg").innerHTML = msg;
	//document.getElementById("tipText").innerHTML = msg;
	
}

</script>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="red">
<tr valign="top">
	<td>
		<jsp:include page="top.jsp"></jsp:include>	

	</td>
</tr>

<tr height="3px"></tr>
<tr valign="top">
	<td align="left" style="padding-left:8px; padding-right:8px;"><script charset="utf-8" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<%=com.brother.util.CommonProperties.getGoogleMapKey(request.getServerName()) %>&hl=<%=session.getAttribute("locale").toString().equals("zh")?"zh_CN":"en"%>" type="text/javascript"></script>
	<script language=javascript src="js/google_map.js"></script> <script>
var trackerUserid = '<%=user.getUserid()%>';	

var locale = '<%=(String)session.getAttribute("locale")%>';
	
var time_zone = 8;
var g_default_time_zone_hours = parseInt(time_zone);
var g_default_time_zone_minutes = (time_zone - parseInt(time_zone)) * 60;

var g_str_comment = "";
var g_str_id = "ID:";
var g_str_lat = "Lat:";
var g_str_lng = "Lng:";
var g_str_signal = "Signal:";
var g_str_speed = "Speed:";
var g_str_state = "State:";

function get_gps_cmd_str(cmd)
{
	if (cmd == 0)
	{
		return "<fmt:message key="alarm.gps.pos"/>";
	}
	else if (cmd == 0x01)
	{
		return "SOS Alarm";
	}
	else if (cmd == 0x02)
	{
		return "Key 2 Alarm";
	}
	else if (cmd == 0x03)
	{
		return "Key 3 Alarm";
	}
	else if (cmd == 0x04)
	{
		return "Key 4 Alarm";
	}
	else if (cmd == 0x10)
	{
		return "<fmt:message key="alarm.low.power"/>";
	}
	else if (cmd == 0x11)
	{
		return "<fmt:message key="alarm.gps.over.speed"/>";
	}
	else if (cmd == 0x12)
	{
		return "Position Move Alarm";
	}
	else if (cmd == 0x13)
	{
		return "<fmt:message key="alarm.gps.geo.fence"/>";
	}
	else if (cmd == 0x14)
	{
		return "Reset Alarm";
	}
	else if (cmd == 0x15)
	{
		return "<fmt:message key="alarm.no.signal"/>";
	}
	else if (cmd == 0x16)
	{
		return "<fmt:message key="alarm.restore.signal"/>";
	}
	
	return "<fmt:message key="alarm.unknown"/>";
}

    Ext.onReady(function(){
    
    
    new Ext.form.DateField({
                        fieldLabel: '',
                        allowBlank:false,
                        format:'<%=extDateFormat%>',
                        applyTo: 'from'
    });
 
     new Ext.form.DateField({
                        fieldLabel: '',
                        allowBlank:false,
                        format:'<%=extDateFormat%>',
                        applyTo: 'to'
    });   
    
    	var t = new Ext.form.TimeField({
            fieldLabel: '',
            increment:5,
            value:'00:00',
            format:'H:i',
            applyTo: 'startTime'
            
        });
        
     	var t2 = new Ext.form.TimeField({
            fieldLabel: '',
            increment:5,
            value:'23:59',
            format:'H:i',
            applyTo: 'endTime'
        });       
        
    });

</script>
<script language=javascript src="js/gps.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/submodal.js"></script>
<script language="javascript">renderPopWin();</script>
<script>
var g_str_loading_data = "<fmt:message key="history.loading.data"/>";
var g_str_select_tracker_search = "<fmt:message key="history.select.tracker.search"/>";
var g_str_select_device_save = "<fmt:message key="history.select.tracker.save"/>";
var g_str_history_load_complete = "<fmt:message key="history.load.complete"/>";
var g_str_points = "<fmt:message key="history.points"/>";
var g_str_parsing_map = "<fmt:message key="history.parsing"/>";
var g_str_history_empty = "<fmt:message key="history.empty"/>";
var g_str_tracking_animation = "<fmt:message key="history.tracking.animation"/>";

var g_default_lat = 40.7588;
var g_default_lng = -74.0009;
var g_default_level = 14;
var g_default_type = G_NORMAL_MAP;

function onTrackerSelect(tracker){
	if(tracker == null){
		return;
	}
	//console.log(tracker.trackerId);
	document.getElementById("uin").value  = tracker.trackerId;
	document.getElementById("uinText").value  = tracker.name;
	if(win) win.hide();
}
var win = null;

Ext.onReady(function(){
	//document.getElementById("uin").value  = "";
	//document.getElementById("uinText").value  = "";
});

var gridPageSize = 14;
var gridHeight  = 420;
function SelectTracker(){
	//win.body = Ext.get('grid-trackers');
	if(win == null){
		Ext.get('grid-window').setStyle("left","0px");
		Ext.get('grid-window').setStyle("top","0px");
		Ext.get('grid-window').setStyle("position","relative");
		
		win = new Ext.Window({width:214, height:530, closeAction:'hide',title:'', modal:true, contentEl:Ext.get('grid-window')});
		Ext.get('grid-window').setStyle("display","");
	}
	win.show();
	var top = document.body.scrollTop;
	win.setPosition(document.body.clientWidth / 2 -  win.getWidth() / 2, top);
	
}
trackerHeader = '<fmt:message key="grid.trackerHeader"/>';

var history_time_input = '<fmt:message key="history.time.input"/>';

</script>

<table width="100%" height="100%" border="0" bordercolor="red">
	<tr>
		<td width="260px" valign="top">
			<table width="100%" cellspacing="0" cellpadding="0">
				<tr>
					<td style="padding-top:10px;"><span style="font-size:14px; font-weight:bold"><fmt:message key="history.preview"/>:</span><hr size=1 color="#a9bad3"></td>
				</tr>
				<tr>

					<td align="left" valign="middle">
					<form name="form1" action="gps_history.jsp" method="get" onSubmit="javascript:goto_page(1); return false;">
						<table>
						
							<tr class="dataSpace">
								<td><fmt:message key="report.tracker"/>:</td>
								<td ><input type="hidden" value="" id="uin" name="trackerid"/>
							<input type=text readonly size="35" value="" name="" id="uinText" onClick="SelectTracker()" /><img onClick="SelectTracker()" src="images/sel.png"  align="top" border=0/>

								</td>
							</tr>
							<tr>
								
								<td colspan="2">
									<table class="tableNoBorder" width="100%">
										<tr>
											<td nowrap="nowrap" width="100"><fmt:message key="report.from.date.time"/>:</td>

											<td nowrap="nowrap">
											<input name="createTimeFrom" id="from" type="text" value="<%=format.format(calendar.getTime()) %>" size="10" readonly="readonly" maxlength="50"  />
											</td><td>
											
											<input type="text" name="startTime" id="startTime" size="6" style="width:40px"/>
											
																						</td>
											
										</tr>

										<tr>									
											<td><fmt:message key="report.to.date.time"/>:</td>
											<td nowrap="nowrap"><input name="createTimeTo" id="to" type="text" value="<%=format.format(new Date())%>" size="10" readonly="readonly" maxlength="50" />
											</td><td>
											<input type="text" name="endTime" value="23:59" id="endTime" size="6" style="width:40px"/>
											
																						</td>

										</tr>

									</table>
								</td>
							</tr>
							
										<tr>	
											<td colspan="2" height="10"></td>
										</tr>
										<tr>
										<td colspan="2" nowrap="nowrap">
										    <input type="submit" name="submit" value="<fmt:message key="report.search"/>" />
											<input type="button" style="width:80px" value="<fmt:message key="history.play.stop"/>" onClick="javascript:if(!isPlaying){  isPlaying = true;begin_ani_GPS();}else{isPlaying = false;}" />
				
				<input type="button" style="width:100px" value="<fmt:message key="history.save.kml.file"/>" onClick="javascript:downloadToFile();" />
										    &nbsp;&nbsp;
										    
										  </td>
										  
									  </tr>
									  
						
						</table>
					  </form>
					</td>
				</tr>
				<tr><td id="tipText" height=25><div id="msg" name="msg" style="background-color:#D4DF55; display:inline"></div></td></tr>
				
			
				
				
				<tr><td>
				<table cellpadding="0"  width="100%">
				<tr><td><fmt:message key="report.distance"/>: <div style="display:inline; font-weight:bold; font-size:12px;" id="length" name="length">0</div>&nbsp;KM</td>
				
				<td align="left"><input type="button" value="-" onClick="inc_ani_speed();" /><fmt:message key="report.play.speed"/>:<div id="ani_speed" style="display:inline"></div><input type="button" value="+" onClick="dec_ani_speed();" /></td></tr></table></td></tr>

				<tr>
					<td >
					<b><fmt:message key="history.search.result"/>:</b> &nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="report.number.pages"/> <div style="font-weight:bold;display:inline;cursor:hand;color:#2A1FFF;cursor:pointer" onClick="javascript:g_page--;if (g_page<0)g_page=0; goto_page(g_page);"><fmt:message key="report.previous"/></div>&nbsp;<span id="cur_page"></span>/<span id="total_page"></span>&nbsp;<div style="font-weight:bold;display:inline;cursor:hand;color:#2A1FFF;cursor:pointer" onClick="javascript:g_page++; if (g_page > g_total_pages){g_page = g_total_pages;}goto_page(g_page);"><fmt:message key="report.next"/></div>
					<hr id="tipTop" size=1 color="#a9bad3"/>
					</td>
				</tr>

				<tr>
					<td>
						<iframe id="search_result" name="search_result" style="width:100%;height:360px" frameborder="0">
						</iframe>
						<script type="text/javascript" src="js/history.js"></script>
					</td>
				</tr>
				<tr style="display:none"><td style="font-size:11px; color:#707074;">
				<hr />

				&nbsp;&nbsp;&nbsp;&nbsp;
				<div style="background-color:#FF9F00; width:20px; height:20px; display:inline;">&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;<fmt:message key="report.alarm"/>			&nbsp;&nbsp;&nbsp;&nbsp;
				<div style="background-color:#A0A0A4; width:20px; height:20px; display:inline;">&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;<fmt:message key="report.no.signal"/>			</td></tr>
				<tr>
					<td>
					</td>
				</tr>
			</table>

		</td>
		<td valign="top">
			<div id="control_area" style="display:none;">
			<table cellpadding="0" cellspacing="0">
				<tr>
					<td>
						<input type="button" value="Play/Stop History" onClick="javascript:if (g_curGPS == -1){begin_ani_GPS();}else{g_curGPS = -1;}" />&nbsp;&nbsp;
						<form style="display:inline" name="form_save" action="#" method="get" onSubmit="return false;">
						<input type="button" style="display:none" value="Save to KML file" onClick="javascript:downloadToFile();" /> 
						</form>					
					</td>

				</tr>
				<tr>
					<td>&nbsp;</td>
				</tr>
			</table>
			</div>
			

						<div id="map_canvas" style="border:1px solid #FFFFFF;width:100%; height: 100%">Loading map...</div>
					
		</td>
	</tr>
</table>

	</td>

</tr>
<tr>
	<td colspan="3"><hr size=1 color="#a9bad3">
		<table width="100%" align="center">
			<tr>
				<td align="center">
					<span style="color:#A0A0A4">Copyright &copy; 2008, All rights reserved. - <a href="mailto:">Contact us</a></span>
				</td>

			</tr>
		</table>
	</td>
</tr>
</table>

<div id="grid-window" style="left:-20000px;top:-40000px;position:absolute;">
<table  cellpadding="0" cellspacing="0" width="236" height="500">
<tr>
						<td align="left">
<table cellpadding="0" cellspacing="0"  class="tableNoBorder" width="250">
<tr>
<td class="tableLeftTitle" align="right" style="width:68px"><fmt:message key="search.user.name"/>:</td>
<td><input type="text" name="userName"   id="userAutocomplete"  style="width:100px"/></td>
</tr>
<tr>
<td class="tableLeftTitle" align="right" ><fmt:message key="search.tracker"/>:</td>
<td><input type="text" name="trackerName" id="trackersAutocomplete"  style="width:100px"/></td>
</tr>

<tr><td>&nbsp;</td><td align="left"><input type="button" value="<fmt:message key="report.search"/>" onclick="reloadTrackerGrid();"/></td></tr>
</table></td>
					</tr>
					<tr>
					<td height="100%" align="left">
					<div id="grid-trackers" style="height:100%"></div>
					</td>
					</tr>
					
					</table>
</div>

</body>
</html>
<%
com.brother.database.DataBase.closeThreadConnection();
%>